<template>
  <div class="home-container">
    <!-- Hero Start -->
    <div id="demo" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target=“#demo” data-slide-to="0" class="active"></li>
        <li data-target=“#demo” data-slide-to="1"></li>
      </ul>
      <!-- <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="@/assets/images/hero.jpg">
        </div>
        <div class="carousel-item">
          <img src="@/assets/images/hero.jpg">
        </div>
      </div> -->

          <div class="container-fluid bg-primary py-5 mb-5 hero-header">
            <div class="carousel-inner container py-5">
            <!-- <div class="container py-5"> -->
              <div class="carousel-item row justify-content-start active">
              <!-- <div class="row justify-content-start"> -->
                <div class="col-lg-8 text-center text-lg-start">
                  <!-- <h5
                    class="d-inline-block text-primary text-uppercase border-bottom border-5"
                    style="border-color: rgba(256, 256, 256, 0.3) !important"
                  >
                    欢迎使用，{{userInfo.name}}!
                  </h5> -->
                  <h1 class="display-1 text-white mb-md-4">
                    便捷、高效的社区医疗预约服务
                  </h1>
                  <div class="pt-2" v-show="userInfo.type">
                    <a @click="popInformation" class="btn btn-outline-light rounded-pill py-md-3 px-md-5 mx-2 text-white"
                      >开始预约</a>
                  </div>
                </div>
              </div>

              <div class="carousel-item row justify-content-start">
                <div class="col-lg-8 text-center text-lg-start">
                  <!-- <h5
                    class="d-inline-block text-primary text-uppercase border-bottom border-5"
                    style="border-color: rgba(256, 256, 256, 0.3) !important"
                  >
                    欢迎使用，{{userInfo.name}}!
                  </h5> -->
                  <h1 class="display-1 text-white mb-md-4">
                    缓解线下拥挤，避免交叉感染
                  </h1>
                  <div class="pt-2" v-show="userInfo.type">
                    <a @click="popInformation" class="btn btn-outline-light rounded-pill py-md-3 px-md-5 mx-2 text-white"
                      >开始预约</a>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <el-dialog title="预约提示" :visible.sync="dialogVisible" class="tips-dialog">
      <div>亲爱的<h4 style="display:initial">{{userInfo.name}}</h4>您好！</div>
      <div>&nbsp; &nbsp;首先非常感谢您使用我们的系统，预约的流程为：您首先需要<strong>点击首页上方门诊</strong>，<strong>选择相应的门诊</strong>进入后，会出现每个门诊对应的医生列表，你可以选择您心仪的医生进行预约，祝您使用愉快!</div>
    </el-dialog>

          <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
      

    </div>
    <!-- Hero End -->
    
    <!-- 社区医院信息开始 -->
    <div class="container-fluid py-5">
      <div class="container">
        <div class="row gx-5">
          <div class="col-lg-5 mb-5 mb-lg-0" style="min-height: 31.25rem">
            <div class="position-relative h-100">
              <!-- <img class="position-absolute w-100 h-100 rounded" src="@/assets/images/about.jpg" style="object-fit: cover;"> -->
              <img
                class="w-100 h-100 rounded"
                src="@/assets/images/about.jpg"
                style="object-fit: cover"
              />
            </div>
          </div>
          <div class="col-lg-7">
            <div class="mb-4">
              <h5
                class="d-inline-block text-primary text-uppercase border-bottom border-5"
              >
                关于我们
              </h5>
              <h1 class="display-4">华中师范大学社区医院</h1>
            </div>
            <p>
              洪山区珞南街华中师范大学社区卫生服务中心（华中师范大学医院）为一级甲等医院，具有较好的医疗环境，完善的服务体系，个性化的管理模式，和谐的人际关系。现有建筑面积4000平方米，分门诊部和住院部，门诊部分内、外、中医内外、中西医结合科、妇、口腔、五官、皮肤科等17个一级诊疗科目，住院部病床100张。全院在职职工90人，其中专业技术人员80人，副高职以上26人，中级39人。
              全科诊室的医务人员由全科医生、全科护士和保健人员组成，是承担社区卫生服务的中坚力量。配有基本的医疗设备，如：500mA高频双球双床X光机、全自动生化仪、全自动血球分析仪（2台）、光纤手机牙科综合治疗仪2台、红外线乳透仪、B超、十二导心电图机、动态心电图机、动态血压仪、煎药机及多种康复治疗仪等。
            </p>
            <div class="row g-3 pt-3">
              <div class="col-sm-3 col-6">
                <div class="bg-light text-center rounded-circle py-4">
                  <i class="fa fa-3x fa-user-md text-primary mb-3"></i>
                  <h6 class="mb-0">
                    高质量<small class="d-block text-primary">医生</small>
                  </h6>
                </div>
              </div>
              <div class="col-sm-3 col-6">
                <div class="bg-light text-center rounded-circle py-4">
                  <i class="fa fa-3x fa-procedures text-primary mb-3"></i>
                  <h6 class="mb-0">
                    全方面<small class="d-block text-primary">门诊</small>
                  </h6>
                </div>
              </div>
              <div class="col-sm-3 col-6">
                <div class="bg-light text-center rounded-circle py-4">
                  <i class="fa fa-3x fa-microscope text-primary mb-3"></i>
                  <h6 class="mb-0">
                    卫生<small class="d-block text-primary">环境</small>
                  </h6>
                </div>
              </div>
              <div class="col-sm-3 col-6">
                <div class="bg-light text-center rounded-circle py-4">
                  <i class="fa fa-3x fa-ambulance text-primary mb-3"></i>
                  <h6 class="mb-0">
                    较完善<small class="d-block text-primary">医疗设备</small>
                  </h6>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 社区医院信息开始 -->

    <!-- Tips部分开始 -->
    <div class="container-fluid py-5">
      <div class="container">
        <div class="text-center mx-auto mb-5" style="max-width: 31.25rem">
          <h5
            class="d-inline-block text-primary text-uppercase border-bottom border-5"
          >
            Tips
          </h5>
          <h1 class="display-4">面对疫情的小提示</h1>
        </div>

        <div class="row g-5">
          <!-- <div class="col-lg-4 col-md-6"> 中col-lg是tips盒的宽-->
          <div class="col-lg-4 col-md-6">
            <div
              class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center"
            >
              <!-- <div class="service-icon mb-4"> -->
              <div class="service-icon mb-4">
                <i class="fa fa-2x fa-user-md text-white"></i>
              </div>
              <h4 class="mb-3">做好个人防护措施</h4>
              <p class="m-0">
                当您进入各类公共场所应全程规范佩戴医用外科口罩或N95口罩，佩戴时间超过4小时要及时更换。外出返家后要及时进行手部清洁、消毒。尽量减少聚餐聚会和走亲访友，工作场所、生活场所尽可能“两点一线”。非必要不进行核酸检测，确需进行核酸检测的务必做好个人防护。居家、办公场所勤开窗、常通风，每日开窗通风2—3次，每次不少于30分钟。
              </p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div
              class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center"
            >
              <div class="service-icon mb-4">
                <i class="fa fa-2x fa-procedures text-white"></i>
              </div>
              <h4 class="mb-3">康复后切勿剧烈运动</h4>
              <p class="m-0">
                新冠病毒感染者进入康复期后，我们的身体恢复需要一定的时间，这时候并不适合进行户外的锻炼、跑步、爬山等高强度的运动。高强度的运动不但不能够恢复健康，还有可能引发一些其他的健康问题，严重时会产生猝死的现象，因此需等待2-3周的静养之后再循序渐进地开始运动锻炼。
              </p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6">
            <div
              class="service-item bg-light rounded d-flex flex-column align-items-center justify-content-center text-center"
            >
              <div class="service-icon mb-4">
                <i class="fa fa-2x fa-pills text-white"></i>
              </div>
              <h4 class="mb-3">科学补充营养</h4>
              <p class="m-0">
                在新冠病毒感染者进入康复期后的1-2周时间内，都处在身体的恢复期，在饮食上我们不要大吃大喝，要保持清淡饮食，及时加强营养，摄入优质蛋白质，多吃蔬菜水果，做到荤素搭配、丰富多样，保证体力的恢复。避免进食冷饮、重油重辣等食物，还要注意戒烟限酒。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  <!-- Tips部分结束 -->
  
</template>

<script>
import { getUserInfo } from "@/api/user"
import { mapGetters } from "vuex"
export default {
  name: "homePage",
  data() {
    return {
      dialogVisible:false,
      userInfo: {
        name: "",
        id_number: "",
        sex: "0",
        account_balance: "",
        type: '1',
        descriptions: "",
        avatar:
          "blob:http://localhost:8080/b61c3910-e59e-4c80-9a8e-32cea5f6915f",

      },
      outpatientList:[
        {
          id:1,
          title:'发热门诊'
        },
        {
          id:2,
          title:'内科门诊'
        },
        {
          id:3,
          title:'耳鼻喉科门诊'
        },
        {
          id:4,
          title:'儿科门诊'
        },
        {
          id:4,
          title:'急诊'
        }
      ]
    }
  },
  computed:{
    ...mapGetters(["id"]),
  },
  created() {
    console.log('mounted')
    this.handleGetUserInfo()
  },
  methods: {
    async handleGetUserInfo() {
      let {data} = await getUserInfo({id:this.id})
      console.log(data)
      this.userInfo = data
    },
    popInformation(){
      this.dialogVisible = true
    }
  },
}
</script>

<style lang="scss">
.text-primary {
  color: var(--primary) !important;
}
// .home-container {
//   .home-container-header{
//     height: 5rem;
//     width: 100%;
//     color: #48dac6;
//     border-bottom: 2px solid #ffffff;
//     line-height: 5rem;
//     &-outer{
//       width: 100%;
//       top: 0;
//       position: fixed;
//       display: flex;
//       justify-content: space-between;
//       align-items: center;
//     }
//     &-right{
//       margin-right: 5rem;
//       display: flex;
//       align-items: center;
//     }
//     .iconfont{
//       font-size: 2rem;
//     }
//     h3{
//       padding: 0;
//       margin: 0;
//       margin-left: 1rem;
//       font-size: 2rem;
//     }
//   }
//   .el-carousel--horizontal {
//     height: 32rem;
//   }
//   .el-carousel__container {
//     height: 100% !important;
//   }
//   .el-carousel__item img {
//     opacity: 0.75;
//     width: 100%;
//     /* max-width: 100 %; */
//     max-height: 100%;
//   }
//
// 这里写css内容

// }
.home-container {
  a:not([href]):not([tabindex]){
    color: white;
  }
  a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover{
    color: black !important;
  }
}
      .text-primary {
    color: var(--primary) !important;
}

.tips-dialog{
  .el-dialog{
    width: 60rem;
  }
  .el-dialog__body{
    div{
      font-size: 1.1rem;
      margin: 1rem;
    }
  }
  
}

// .service-item a.btn {
//     position: absolute;
//     width: 3.75rem;
//     bottom: -3rem;
//     left: 50%;
//     margin-left: -1.875rem;
//     opacity: 0;
// }

// .service-item:hover a.btn {
//     bottom: -1.5rem;
//     opacity: 1;
// }

// .price-carousel::after {
//     position: absolute;
//     content: "";
//     width: 100%;
//     height: 50%;
//     bottom: 0;
//     left: 0;
//     background: var(--primary);
//     border-radius: 0.5rem 0.5rem 50% 50%;
//     z-index: -1;
// }

// .price-carousel .owl-nav {
//     margin-top: 2.1875rem;
//     width: 100%;
//     text-align: center;
//     display: flex;
//     justify-content: center;
// }

// .price-carousel .owl-nav .owl-prev,
// .price-carousel .owl-nav .owl-next{
//     position: relative;
//     margin: 0 0.3125rem;
//     width: 2.8125rem;
//     height: 2.8125rem;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     color: var(--primary);
//     background: #FFFFFF;
//     font-size: 1.375rem;
//     border-radius: 2.8125rem;
//     transition: .5s;
// }

// .price-carousel .owl-nav .owl-prev:hover,
// .price-carousel .owl-nav .owl-next:hover {
//     color: var(--dark);
// }

// @media (min-width: 36rem) {
//     .team-item .row {
//         height: 21.875rem;
//     }
// }

// .team-carousel .owl-nav {
//     position: absolute;
//     padding: 0 2.8125rem;
//     width: 100%;
//     height: 2.8125rem;
//     top: calc(50% - 1.40625rem);
//     left: 0;
//     display: flex;
//     justify-content: space-between;
// }

// .team-carousel .owl-nav .owl-prev,
// .team-carousel .owl-nav .owl-next {
//     position: relative;
//     width: 2.8125rem;
//     height: 2.8125rem;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     color: #FFFFFF;
//     background: var(--primary);
//     border-radius: 2.8125rem;
//     font-size: 1.375rem;
//     transition: .5s;
// }

// .team-carousel .owl-nav .owl-prev:hover,
// .team-carousel .owl-nav .owl-next:hover {
//     background: var(--dark);
// }

// .testimonial-carousel .owl-dots {
//     margin-top: 0.9375rem;
//     display: flex;
//     align-items: center;
//     justify-content: center;
// }

// .testimonial-carousel .owl-dot {
//     position: relative;
//     display: inline-block;
//     margin: 0 0.3125rem;
//     width: 1.25rem;
//     height: 1.25rem;
//     background: var(--light);
//     border: 0.125rem solid var(--primary);
//     border-radius: 1.25rem;
//     transition: .5s;
// }

// .testimonial-carousel .owl-dot.active {
//     width: 2.5rem;
//     height: 2.5rem;
//     background: var(--primary);
// }

// .testimonial-carousel .owl-item img {
//     width: 9.375rem;
//     height: 9.375rem;
// }

.btn {
  font-weight: 700;
  transition: 0.5s;

}

.btn-primary {
  color: black;
}

.carousel-inner img{
  width:100%;
  height:100%;
}

</style>
